<template>
    <v-container fluid style="height: 100%">
        <v-layout row warp align-center justify-center fill-height>
            <v-flex xs3>
                <v-card v-loading="loading">
                    <v-card-title>Sign In</v-card-title>
                    <v-card-text>
                        <sign-in-form v-model="form" ref="form" @submit="onSubmit"/>
                    </v-card-text>

                    <v-card-actions>
                        <v-btn @click="$refs['form'].onSubmit()" color="primary">Submit</v-btn>
                    </v-card-actions>
                </v-card>
            </v-flex>
        </v-layout>
    </v-container>
</template>

<script>
    import SignInForm from '@/components/form/SignInForm';
    import api from '@/comment/apis/user/Auth'

    export default {
        components: {SignInForm},
        data() {
            return {
                loading: false,
                form: {
                    email: 'admin@admin.com',
                    password: 'admin1234',
                    rememberMe: true
                }
            };
        },
        methods: {
            onSubmit() {
                this.loading = true;
                this.$store.dispatch('login', this.form).then(res => {
                    if (res) this.getUserInfo();
                }).finally(() => {
                    this.loading = false
                })
            },
            getUserInfo() {
                this.loading = true;
                api.userInfo({}).then(res => {
                    this.$util.handelHttpResponse(res).then(({data}) => {
                        this.$store.commit('setUserInfo', data);
                        this.$store.commit('setLoginStatus', true);
                        this.$router.replace({name: 'Index'})
                    })
                }).finally(() => this.loading = false)
            }
        }
    };
</script>

<style scoped>

</style>